<template>
	<view>
		<template v-if="props.modalType.includes('market')">
			<view class="need">
				<view class="need-left font-AlimamaDongFangDaKaiRegular">
					需要支付
				</view>
				<image class="need-img" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
				<view class="need-right font-DIN">
					{{props.needPay}}
				</view>
			</view>
			<view class="belong">
				<view class="belong-left font-AlimamaDongFangDaKaiRegular">
					我拥有
				</view>
				<image class="belong-img" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
				<view class="belong-right font-DIN">
					{{props.iHave}}
				</view>
			</view>
			<button class="pay-btn font-AlimamaDongFangDaKaiRegular">确认购买</button>
		</template>
		<template v-else-if="props.modalType.includes('backpack')">
			<view class="btn-group">
				<button class="btn-style font-AlimamaDongFangDaKaiRegular">开蛋</button>
				<button class="btn-style font-AlimamaDongFangDaKaiRegular">赠送</button>
				<button 
				class="btn-style font-AlimamaDongFangDaKaiRegular"
				>出售</button>
			</view>
		</template>
		
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { computed, reactive, ref } from 'vue';
	const props = defineProps({
		modalType: {
			type: String,
			default: 'market'
		},
		needPay: {
			type: Number,
			default: 2.62988
		},
		iHave: {
			type: Number,
			default: 2.62988
		}
	})
	
</script>
	
<style lang="scss" scoped>
	.need{
		width:650rpx;
		height: 100rpx;
		flex-shrink: 0;
		border-radius: 118rpx;
		background: #FFF3C9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.need-left{
			color: #017482;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 400;
		}
		.need-right{
			color: #017482;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
		}
		.need-img{
			margin: 0 18rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}     
	.belong{
		margin: 30rpx 0;
		width:650rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.belong-left{
			color: #017482;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
		}
		.belong-right{
			color: #017482;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
		}
		.belong-img{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.pay-btn{
		width: 650rpx;
		height: 100rpx;
		flex-shrink: 0;
		border-radius: 104rpx;
		background: linear-gradient(0deg, #FB894F 0%, #FF6437 100%);
		line-height: 100rpx;
		color: #FFF;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
	}
	.btn-group{
		width: 700rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.btn-style{
			width: 182rpx;
			height: 100rpx;
			flex-shrink: 0;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #FFF3C9 0%, #FFEBA6 100%);
			box-shadow: 2rpx 2rpx 8rpx 0rpx #FFF8E0 inset;
			color: #017482;
			text-align: center;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 100rpx; 
		}
	}
</style>
